import {Button, Form, Input, Spin, Result} from 'antd'
import { useEffect } from 'react'
import { useDispatch, useSelector } from 'react-redux'
import { Link } from 'react-router-dom'
import { signup, signup_reset } from '../../store/actions/signup'
import Layout from './Layout'

function Signup () {

    const dispatch = useDispatch()
    // 表达提交
    const handleOnFinish = value => {
        dispatch(signup(value))
    }
    // 获取状态
    const {isLoading,isloaded,success,message} = useSelector(state => state.signup)
    // 获取表单实例对象
    const [form] = Form.useForm()

    // 正在发送注册请求 显示loading
    const showLoading = () => {
        if(isLoading) {
            return(
                <Spin />
            )
        }
    }
    // 注册成功 清空表单
    useEffect(() => {
        console.log(isloaded,success)
        if (isloaded && success) {
            // 清空表单
            form.resetFields()
        }
    }, [isloaded, success])

    // 注册成功，显示成功提示信息
    const showSuccess = () => {
        if (isloaded && success) {
            return (
                <Result
                    status="success"
                    title="注册成功!"
                    extra={[
                    <Button type="primary">
                        <Link to="/signin">登录</Link>
                    </Button>
                    ]}
                />   
            )
        }
    }

    // 注册失败  显示失败提示信息
    const showError = () => {
        if(isloaded && !success) {
            return (
                <Result
                    status="warning"
                    title="注册失败!"
                    subTitle={message}
                />  
            )
        }
    }
    // 离开页面  重置状态
    useEffect(() => {
        return () => {
            dispatch(signup_reset())
        }
    },[])

    // 注册表单
    const signupForm = () => {
        return (
            <Form form={form} onFinish={handleOnFinish}>
                <Form.Item name="name" label="昵称">
                    <Input ></Input>
                </Form.Item>
                <Form.Item name="password" label="密码">
                    <Input.Password ></Input.Password>
                </Form.Item>
                <Form.Item name="email" label="邮箱">
                    <Input ></Input>
                </Form.Item>
                <Form.Item>
                    <Button type="primary" htmlType="submit">注册</Button>
                </Form.Item>
            </Form>
        )
    }

    return(
        <Layout title="注册" subTitle="">
            {showLoading()}
            {showSuccess()}
            {showError()}
            {signupForm()}
        </Layout>
        
    )
}
export default Signup